<template>



    <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">


        <a-form-model-item label="系统选择" prop="system" ref="system">
            <a-radio-group v-model="form.system" buttonStyle="solid">

                <a-radio-button value="1">
                    管理后台
                </a-radio-button>
                <a-radio-button value="2">
                    微信公众
                </a-radio-button>
                <a-radio-button value="3">
                    微信小程序
                </a-radio-button>


            </a-radio-group>
        </a-form-model-item>


        <a-form-model-item label="路由类型" prop="type" ref="type">
            <a-radio-group v-model="form.type" buttonStyle="solid">

                <a-radio-button value="1">
                    菜单
                </a-radio-button>
                <a-radio-button value="2">
                    按钮
                </a-radio-button>


            </a-radio-group>
        </a-form-model-item>


        <a-form-model-item label="上级路由" prop="pid" ref="pid">
            <a-input v-model="form.pid" @blur=" () => { $refs.pid.onFieldBlur(); } "/>
        </a-form-model-item>

        <a-form-model-item label="图标代码" prop="icon" ref="icon">
            <a-input v-model="form.icon" @blur=" () => { $refs.icon.onFieldBlur(); } "/>
        </a-form-model-item>

        <a-form-model-item label="路由标识" prop="signs" ref="signs">
            <a-input v-model="form.signs" @blur=" () => { $refs.signs.onFieldBlur(); } "/>
        </a-form-model-item>


        <a-form-model-item label="路由标题" prop="title" ref="title">
            <a-input v-model="form.title" @blur="()=>{$refs.title.onFieldBlur();}"   />
        </a-form-model-item>


        <!-- 字典排序 -->
        <a-form-model-item label="组件/方法" prop="component" ref="component">
            <a-input v-model.number="form.component" @blur=" () => { $refs.component.onFieldBlur(); } "/>
        </a-form-model-item>

        <a-form-model-item label="访问路径" prop="path" ref="path">
            <a-input v-model.number="form.path" @blur=" () => {$refs.path.onFieldBlur(); } "/>
        </a-form-model-item>

        <a-form-model-item label="显示排序" prop="sort" ref="sort">
            <a-input v-model.number="form.sort" @blur=" () => { $refs.sort.onFieldBlur(); } "/>
        </a-form-model-item>


        <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
            <a-button type="primary" @click="onSubmit">
                保存
            </a-button>

        </a-form-model-item>

    </a-form-model>

</template>
<script>


    export default {
        data() {
            return {
                other: '',

                labelCol: {
                    span: 4
                },
                wrapperCol: {
                    span: 14
                },

                form: {
                    system: '',
                    type: '',
                    title: '',
                    pid: '',
                    component: '',
                    path: '',
                    sort: '',
                    icon: '',

                },
                rules: {
                    system: {
                        required: true,
                        message: '请选择所属系统',
                        trigger: 'blur'
                    },


                    type: {
                        required: true,
                        message: '请设置路由类型',
                        trigger: 'blur'
                    },


                    icon: {
                        required: true,
                        message: '请设置一个图标代码',
                        trigger: 'blur'
                    },


                    title: [{
                        required: true,
                        message: '请设置路由标题2-4个字以内',
                        trigger: 'blur'
                    }],


                    signs: {
                        required: true,
                        message: '请设置路由标识',
                        trigger: 'blur'
                    },

                    pid: {
                        required: true,
                        message: '请选择上级路由',
                        trigger: 'blur'
                    },

                    component: {
                        required: true,
                        message: '请设置路由对应的组件路径或者方法路径',
                        trigger: 'blur'
                    },


                    path: {
                        required: true,
                        message: '请设置路由的访问路径',
                        trigger: 'blur'
                    },

                    sort: {
                        required: true,
                        message: '请设置显示排序',
                        trigger: 'blur'
                    },


                },
            };
        },
        methods: {
            onSubmit() {
                this.$refs.ruleForm.validate(valid => {
                    if (valid) {
                        console.log(valid);
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm() {
                this.$refs.ruleForm.resetFields();
            },
        },
    };
</script>
